import { Pressable, StyleSheet, Text } from 'react-native';
import { px2dp } from '../utils/pixel-adapter';
import React from 'react';


export function MyButton(props) {
    const children = React.isValidElement(props.children) ?
    props.children :
    <Text style={styles.button_text}>{props.children}</Text>;

    return (
        <Pressable
            onPress={props.onPress}
            style={({ pressed }) => {
                return [styles.button, props.style, { opacity: pressed ? 0.9 : 1}];
            }}
        >
            {children}
        </Pressable>
    );
}


const styles = StyleSheet.create({
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        borderRadius: px2dp(16),
    },
    button_text: {
        color: 'black',
        fontSize: px2dp(16),
    },
});
